<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的帖子 - 什么都论</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        * { box-sizing: border-box; margin: 0; padding: 0; }
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
            background-color: #f4f6f9;
        }
        .main-container {
            max-width: 1200px;
            margin: 40px auto;
            display: flex;
            gap: 30px;
        }
        .profile-sidebar {
            flex: 1;
            background: #fff;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.07);
            padding: 30px 20px;
            text-align: center;
        }
        .profile-avatar {
            width: 90px;
            height: 90px;
            border-radius: 50%;
            object-fit: cover;
            margin-bottom: 18px;
            border: 3px solid #2A4DD0;
        }
        .profile-username {
            font-size: 22px;
            font-weight: bold;
            margin-bottom: 8px;
            color: #2A4DD0;
        }
        .profile-info {
            color: #666;
            font-size: 15px;
            margin-bottom: 18px;
        }
        .edit-profile-btn {
            display: inline-block;
            padding: 8px 24px;
            background: #2A4DD0;
            color: #fff;
            border-radius: 20px;
            border: none;
            font-size: 15px;
            cursor: pointer;
            transition: background 0.2s;
        }
        .edit-profile-btn:hover {
            background: #041F9A;
        }
        .profile-stats {
            display: flex;
            justify-content: space-around;
            margin-top: 20px;
        }
        .stat {
            text-align: center;
        }
        .stat-value {
            font-size: 20px;
            font-weight: bold;
            color: #2A4DD0;
        }
        .stat-label {
            font-size: 13px;
            color: #999;
        }
        .content-area {
            flex: 3;
            background: #fff;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.07);
            padding: 30px;
        }
        .tabs {
            display: flex;
            border-bottom: 2px solid #f0f0f0;
            margin-bottom: 25px;
        }
        .tab {
            padding: 12px 32px;
            font-size: 17px;
            color: #666;
            cursor: pointer;
            border: none;
            background: none;
            transition: all 0.2s;
        }
        .tab.active {
            color: #2A4DD0;
            border-bottom: 2px solid #2A4DD0;
            font-weight: bold;
        }
        .tab-content {
            display: none;
        }
        .tab-content.active {
            display: block;
        }
        .post-card {
            background: #f8fafc;
            border-radius: 8px;
            padding: 20px;
            margin-bottom: 15px;
            cursor: pointer;
            transition: all 0.2s;
            border-left: 4px solid #2A4DD0;
        }
        .post-card:hover {
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
            transform: translateY(-2px);
        }
        .post-title {
            font-size: 18px;
            font-weight: bold;
            color: #2A4DD0;
            margin-bottom: 8px;
        }
        .post-meta {
            font-size: 13px;
            color: #999;
            margin-bottom: 10px;
        }
        .post-content {
            color: #666;
            font-size: 15px;
            line-height: 1.5;
        }
        
        /* 编辑表单样式 */
        .modal-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.5);
            z-index: 999;
        }
        .edit-modal {
            display: none;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: white;
            padding: 30px;
            border-radius: 10px;
            width: 400px;
            z-index: 1000;
        }
        .modal-overlay.active,
        .edit-modal.active {
            display: block;
        }
        .form-group {
            margin-bottom: 15px;
        }
        .form-group label {
            display: block;
            margin-bottom: 5px;
            color: #666;
        }
        .form-group input,
        .form-group textarea {
            width: 100%;
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }
        .form-buttons {
            display: flex;
            justify-content: flex-end;
            gap: 10px;
            margin-top: 20px;
        }
        .form-buttons button {
            padding: 8px 16px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        .form-buttons .cancel {
            background: #f0f0f0;
        }
        .form-buttons .save {
            background: #2A4DD0;
            color: white;
        }

        @media (max-width: 768px) {
            .main-container {
                flex-direction: column;
                padding: 15px;
                margin: 20px auto;
            }
            .profile-sidebar,
            .content-area {
                width: 100%;
            }
            .tabs {
                flex-direction: column;
            }
            .tab {
                width: 100%;
                text-align: left;
            }
        }
    </style>
</head>
<body>
    <div class="main-container">
        <!-- 左侧个人信息 -->
        <div class="profile-sidebar">
            <img src="../image/head/Default.jpg" alt="头像" class="profile-avatar">
            <div class="profile-username">用户昵称</div>
            <div class="profile-info">这个人很懒，什么都没写～</div>
            <button class="edit-profile-btn" onclick="showEditModal()">编辑资料</button>
            <div class="profile-stats">
                <div class="stat">
                    <div class="stat-value">12</div>
                    <div class="stat-label">帖子</div>
                </div>
                <div class="stat">
                    <div class="stat-value">56</div>
                    <div class="stat-label">获赞</div>
                </div>
                <div class="stat">
                    <div class="stat-value">8</div>
                    <div class="stat-label">评论</div>
                </div>
            </div>
        </div>

        <!-- 右侧内容区 -->
        <div class="content-area">
            <div class="tabs">
                <button class="tab active" data-tab="my-posts">我发表的</button>
                <button class="tab" data-tab="liked-posts">我赞过的</button>
                <button class="tab" data-tab="commented-posts">我评论过的</button>
            </div>

            <div class="tab-content active" id="my-posts">
                <div class="post-card">
                    <div class="post-title">如何高效学习PHP？</div>
                    <div class="post-meta">2025-05-30 | 12条评论 | 34赞</div>
                    <div class="post-content">分享一下我学习PHP的经验和常见的坑...</div>
                </div>
                <div class="post-card">
                    <div class="post-title">前端框架选择建议</div>
                    <div class="post-meta">2025-05-28 | 8条评论 | 21赞</div>
                    <div class="post-content">Vue、React、Angular该如何选择？</div>
                </div>
            </div>

            <div class="tab-content" id="liked-posts">
                <div class="post-card">
                    <div class="post-title">2025年最值得学习的编程语言</div>
                    <div class="post-meta">2025-05-25 | 45条评论 | 120赞</div>
                    <div class="post-content">整理了一下2025年最受欢迎的编程语言...</div>
                </div>
            </div>

            <div class="tab-content" id="commented-posts">
                <div class="post-card">
                    <div class="post-title">程序员职业规划分享</div>
                    <div class="post-meta">2025-05-20 | 67条评论 | 89赞</div>
                    <div class="post-content">分享一下我的职业发展经验...</div>
                </div>
            </div>
        </div>
    </div>

    <!-- 编辑资料弹窗 -->
    <div class="modal-overlay">
        <div class="edit-modal">
            <div class="form-group">
                <label>头像</label>
                <input type="file" accept="image/*">
            </div>
            <div class="form-group">
                <label>昵称</label>
                <input type="text" placeholder="请输入昵称">
            </div>
            <div class="form-group">
                <label>个性签名</label>
                <textarea rows="3" placeholder="说点什么吧..."></textarea>
            </div>
            <div class="form-buttons">
                <button class="cancel" onclick="hideEditModal()">取消</button>
                <button class="save" onclick="saveProfile()">保存</button>
            </div>
        </div>
    </div>

    <script>
        // Tab切换逻辑
        document.querySelectorAll('.tab').forEach(tab => {
            tab.onclick = function() {
                document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
                document.querySelectorAll('.tab-content').forEach(tc => tc.classList.remove('active'));
                this.classList.add('active');
                document.getElementById(this.dataset.tab).classList.add('active');
            }
        });

        // 编辑资料弹窗
        function showEditModal() {
            document.querySelector('.modal-overlay').classList.add('active');
            document.querySelector('.edit-modal').classList.add('active');
        }

        function hideEditModal() {
            document.querySelector('.modal-overlay').classList.remove('active');
            document.querySelector('.edit-modal').classList.remove('active');
        }

        function saveProfile() {
            // 这里添加保存资料的逻辑
            hideEditModal();
        }

        // 点击遮罩层关闭弹窗
        document.querySelector('.modal-overlay').onclick = function(e) {
            if (e.target === this) {
                hideEditModal();
            }
        };
    </script>
</body>
</html>